<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1">
  <title>MD: 微信公众号 Markdown 编辑器</title>
  <link rel="stylesheet" href="css/normalize.css"/>
  <link rel="stylesheet" href="css/style.css"/>
  <link rel="stylesheet" href="css/basic-ui.css"/>
  <link rel="stylesheet" href="css/highlight.min.css"/>

  <script src="js/showdown.min.js"></script>
  <script src="js/showdown-plugins/showdown-prettify-for-wechat.js"></script>
  <script src="js/showdown-plugins/showdown-github-task-list.js"></script>
  <script src="js/showdown-plugins/showdown-footnote.js"></script>
  <script src="js/showdown-plugins/showdown-figure.js"></script>
  <script src="js/showdown-plugins/showdown-toc.js"></script>
  <script src="js/showdown-plugins/showdown-better-list.js"></script>
  <script src="js/jquery-3.1.1.js"></script>
  <script src="js/clipboard.min.js"></script>
  <script src="js/spectrum.min.js"></script>

  <link rel="stylesheet" href="google-code-prettify/prettify.css"/>
  <script src="google-code-prettify/run_prettify.js"></script>
  <link rel="stylesheet" href="themes/tomorrow.css"/>

  <link rel="stylesheet" href="css/mifa.css"/>
  <link rel="stylesheet" href="css/spectrum.min.css"/>
  <link rel="stylesheet" href="css/wechat-fix.css"/>
  <script>
    function colorReplace(findHexColor, replaceWith) {
      // Convert rgb color strings to hex
      function rgb2hex(rgb) {
        if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

        function hex(x) {
          return ("0" + parseInt(x).toString(16)).slice(-2);
        }

        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
      }

      // Select and run a map function on every tag
      $('#output').map(function (i, el) {
        // Get the computed styles of each tag
        var styles = window.getComputedStyle(el);

        // Go through each computed style and search for "color"
        Object.keys(styles).reduce(function (acc, k) {
          var name = styles[k];
          var value = styles.getPropertyValue(name);
          if (value !== null && name.indexOf("color") >= 0) {
            // Convert the rgb color to hex and compare with the target color
            if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
              // Replace the color on this found color attribute
              $(el).css(name, replaceWith);
            }
          }
        });
      });
    }

    window.editorColor = '#384452';
    $('document').ready(function () {
      $(window).keydown(function (e){
        if ((e.metaKey || e.ctrlKey) && e.keyCode === 83) { /*ctrl+s or command+s*/
          e.preventDefault();
          return false;
        }
      });
      var converter = new showdown.Converter({
        extensions: ['prettify', 'tasklist', 'footnote', 'figure', 'toc', 'betterlist'],
        tables: true
      });

      function updateOutput() {
        $('#output').html(converter.makeHtml($('textarea#input').val()))
        PR.prettyPrint();
      }

      $('#input').on('input keydown', updateOutput);

      updateOutput();
      var autosave = localStorage.getItem('md.content');

      var $textarea = $("textarea#input");
      if (autosave && autosave !== 'undefined') {
        var text = JSON.parse(autosave);
        $textarea.val(text);
        updateOutput();
      }
      $textarea.change(function () {
        var file = $textarea.val();
        localStorage.setItem('md.content', JSON.stringify(file));
      });

      new Clipboard('.btn');
      $("#colorpicker").spectrum({
        color: window.editorColor,
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        chooseText: "确认",
        cancelText: "取消",
        showSelectionPalette: true,
        maxSelectionSize: 10,
        preferredFormat: "hex",
        localStorageKey: "md.color",
        change: function () {
          var value = $("#colorpicker").val();
          colorReplace(window.editorColor, value);
          window.editorColor = value;
        },
        palette: [
          ["#ffebee", "#ffcdd2", "#ef9a9a", "#e57373", "#ef5350", "#f44336", "#e53935", "#d32f2f", "#c62828", "#b71c1c"],
          ["#fce4ec", "#f8bbd0", "#f48fb1", "#f06292", "#ec407a", "#e91e63", "#d81b60", "#c2185b", "#ad1457", "#880e4f"],
          ["#f3e5f5", "#e1bee7", "#ce93d8", "#ba68c8", "#ab47bc", "#9c27b0", "#8e24aa", "#7b1fa2", "#6a1b9a", "#4a148c"],
          ["#ede7f6", "#d1c4e9", "#b39ddb", "#9575cd", "#7e57c2", "#673ab7", "#5e35b1", "#512da8", "#4527a0", "#311b92"],
          ["#e8eaf6", "#c5cae9", "#9fa8da", "#7986cb", "#5c6bc0", "#3f51b5", "#3949ab", "#303f9f", "#283593", "#1a237e"],
          ["#e3f2fd", "#bbdefb", "#90caf9", "#64b5f6", "#42a5f5", "#2196f3", "#1e88e5", "#1976d2", "#1565c0", "#0d47a1"],
          ["#e1f5fe", "#b3e5fc", "#81d4fa", "#4fc3f7", "#29b6f6", "#03a9f4", "#039be5", "#0288d1", "#0277bd", "#01579b"],
          ["#e0f7fa", "#b2ebf2", "#80deea", "#4dd0e1", "#26c6da", "#00bcd4", "#00acc1", "#0097a7", "#00838f", "#006064"],
          ["#e0f2f1", "#b2dfdb", "#80cbc4", "#4db6ac", "#26a69a", "#009688", "#00897b", "#00796b", "#00695c", "#004d40"],
          ["#e8f5e9", "#c8e6c9", "#a5d6a7", "#81c784", "#66bb6a", "#4caf50", "#43a047", "#388e3c", "#2e7d32", "#1b5e20"],
          ["#f1f8e9", "#dcedc8", "#c5e1a5", "#aed581", "#9ccc65", "#8bc34a", "#7cb342", "#689f38", "#558b2f", "#33691e"],
          ["#f9fbe7", "#f0f4c3", "#e6ee9c", "#dce775", "#d4e157", "#cddc39", "#c0ca33", "#afb42b", "#9e9d24", "#827717"],
          ["#fffde7", "#fff9c4", "#fff59d", "#fff176", "#ffee58", "#ffeb3b", "#fdd835", "#fbc02d", "#f9a825", "#f57f17"],
          ["#fff8e1", "#ffecb3", "#ffe082", "#ffd54f", "#ffca28", "#ffc107", "#ffb300", "#ffa000", "#ff8f00", "#ff6f00"],
          ["#fff3e0", "#ffe0b2", "#ffcc80", "#ffb74d", "#ffa726", "#ff9800", "#fb8c00", "#f57c00", "#ef6c00", "#e65100"],
          ["#fbe9e7", "#ffccbc", "#ffab91", "#ff8a65", "#ff7043", "#ff5722", "#f4511e", "#e64a19", "#d84315", "#bf360c"],
          ["#efebe9", "#d7ccc8", "#bcaaa4", "#a1887f", "#8d6e63", "#795548", "#6d4c41", "#5d4037", "#4e342e", "#3e2723"],
          ["#fafafa", "#f5f5f5", "#eeeeee", "#e0e0e0", "#bdbdbd", "#9e9e9e", "#757575", "#616161", "#424242", "#212121"],
          ["#eceff1", "#cfd8dc", "#b0bec5", "#90a4ae", "#78909c", "#607d8b", "#546e7a", "#455a64", "#37474f", "#263238"]
        ]
      });
    });
  </script>
</head>
<body>
<nav class="navigation">
  <a href="https://github.com/phodal/mifa" title="Mifa on Github" target="_blank">
    <svg class="octocat" viewBox="0 0 250 250">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path class="octocat-arm"
            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"></path>
      <path class="octocat-body"
            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path>
    </svg>
  </a>
</nav>
<div class="row cf">
  <div class="col">
    <div class="header">
      <h3><a href="https://github.com/phodal/MD">MD</a> @phodal with <a href="https://github.com/phodal/mifa">Mifa
        Design</a></h3>
    </div>
    <textarea id="input" cols="100" rows="10">## 公众号 Phodal 专用编辑器

GitHub 地址：[https://github.com/phodal/MD](https://github.com/phodal/MD)

更多精彩内容请<ruby>关注<rt>扫码</rt></ruby>：

![图注：Phodal's Wechat](http://articles.phodal.com/qrcode.jpg)

### 目录示例：

[toc]

### 一些示例

单行高亮：``phodal`` 测试

这是一个脚注的测试 [^note]

```javascript
(function() {
  var input, output;
  var converter = new showdown.Converter();

  function updateOutput() {
      output.innerHTML = converter.makeHtml(input.value);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    input = document.getElementById('input');
    output = document.getElementById('output');

    input.addEventListener('input', updateOutput, false);
    input.addEventListener('keydown', updateOutput, false);

    updateOutput();
  });
})();
```

```
echo 'hello,world'
```

下面是一个列表的示例，技术栈：

1. Google Code Prettify
2. Showdown.js
3. Clipboard

另外一个列表：

- Google Code Prettify
- Showdown.js
- Clipboard

表格示例：

| h1    |    h2   |      h3 |
|-------|---------|---------|
| 100   | [a][1]  | ![b][2] |
| *foo* | **bar** | ~~baz~~ |
| *foo* | **bar** | ~~baz~~ |


### Todo Example

 - [ ] Mercury
 - [x] Venus
 - [x] Earth (Orbit/Moon)
 - [x] Mars
 - [ ] Jupiter
 - [ ] Saturn

[^note]: 测试是指测试

</textarea>
  </div>

  <div class="col">
    <div class="header">
      <button class="btn button" data-clipboard-action="cut" data-clipboard-target="#output">复制</button>
      <input id='colorpicker'/>
    </div>
    <div id="output"></div>
  </div>
</div>
</body>
</html>
